<template>
  <div class="sparePart flowCloumn h100">
    <div class="constentBttom flowWrap tab-switch h100">
      <div class="constentTree treeDiv">
        <div class="sparePartTitle">备品备件结构</div>
        <backupEditTree
          ref="tree"
          :treeSetting="treeSetting"
          :hideBtn="hideBtn"
          @handleClickTree="handleClickTree"
          @addRootNode="addRootNode"
          @addChildNode="addChildNode"
          @editNode="editNode"
          @deleteNode="deleteNode"
          :filterNode="filterNode"
          :default-expanded-keys="defaultExpandKeys"
        >
          <template slot="treeIcon">
            <i class="el-icon-map-location" title="分类下存在未绑定设备的备件" style="color: red"></i>
          </template>
        </backupEditTree>
      </div>
      <div class="draggingBtn">
        <width-resize></width-resize>
      </div>
      <div class="constentmain tableDiv">
        <sparePartList
          @getTreeData="getTreeData"
          :nodeId="nodeId"
          @import="importFile"
          :pageType="pageType"
          :arrId="arrId"
        ></sparePartList>
      </div>
    </div>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
      style="margin-top: 130px"
    >
      <editForm :formConfig="formConfig" ref="editForm" :formData="editFormData"></editForm>
    </dialogPublic>
  </div>
</template>

<script>
import {
  getTree, // 获取分类数据
  deleteClassify, // 删除分类
  updateClassify, // 修改分类
  insertClassify // 新增分类
} from "@/api/equipmentLedger/equipmentBackup.js";
import sparePartList from "./indexList.vue";
import backupEditTree from "./backupEditTreeNew.vue";
export default {
  components: {
    sparePartList,
    backupEditTree
  },
  data() {
    return {
      pageType: "sparePartIndex",
      nodeId: "",
      show: false,
      showImport: false,
      arrId: [],
      defaultExpandKeys: [],
      treeSetting: {
        btnArr: ["add"],
        title: "设备资产管理系统",
        data: [],
        defaultProps: {
          children: "children",
          label: "name"
        },
        expandAll: true
      },
      hideBtn: false,
      orgCode: "",
      editFormData: {},
      allowSelectLevel: [],
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "父级分类",
            prop: "parentName",
            type: "text",
            disabled: true,
            span: 12
          },
          {
            label: "分类名称",
            prop: "name",
            type: "text",
            span: 12,
            required: true
          },
          {
            label: "排序",
            prop: "sort",
            type: "number",
            span: 12,
            required: true
          }
        ]
      }
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    //点击树节点
    handleClickTree(node) {
      this.nodeId = node.id;
      this.orgCode = node.id;
      this.arrId = [];
      this.arrId.push(node.id);
      if (node.children.length) {
        node.children.map(i => {
          this.arrId.push(i.id);
          if (i.children.length) {
            i.children.map(j => {
              this.arrId.push(j.id);
            });
          }
        });
      }
    },
    childrens(arr) {
      if (arr.length) {
        this.childrens(arr);
      } else {
        return;
      }
    },
    //添加根节点
    addRootNode() {
      this.editFormData = {};
      this.title = "添加根节点";
      this.allowSelectLevel = ["1"];
      this.editFormData.parent_id = 0;
      this.editFormData.submitType = "add";
      this.show = true;
    },
    addChildNode(data) {
      this.editFormData = {};
      this.title = "添加节点";
      this.editFormData.parentName = data.name;
      this.editFormData.parent_id = data.id;
      this.editFormData.submitType = "add";
      switch (data.level) {
        case "1":
          this.allowSelectLevel = ["1", "2", "3"];
          break;
        case "2":
          this.allowSelectLevel = ["2", "3"];
          break;
        default:
          this.allowSelectLevel = ["3"];
          break;
      }
      this.show = true;
    },
    editNode(node, data) {
      this.editFormData = data;
      this.title = "编辑节点";
      this.editFormData.parentName = node.parent.data.name;
      this.editFormData.parent_id = this.editFormData.parent_id;
      this.editFormData.sort = data.sort;
      this.editFormData.submitType = "edit";
      this.show = true;
    },
    deleteNode(id) {
      // 根据id删除分类
      console.log(id);
      let data = {
        id: id
      };
      deleteClassify(data).then(res => {
        this.getTreeData();
      });
    },
    //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    async doSubmit() {
      let params = await this.$refs.editForm.getFormData();
      let data = {};
      if (params.submitType == "add") {
        insertClassify(params).then(res => {
          this.getTreeData();
        });
      } else {
        (data.id = params.id), (data.name = params.name);
        data.sort = params.sort;
        updateClassify(data).then(res => {
          this.getTreeData();
        });
      }
      this.show = false;
      this.defaultExpandKeys = [2, 3];
    },
    //获取组织树数据
    getTreeData() {
      let data = {
        parent_id: 0
      };
      //得到组织树的数据
      getTree(data).then(
        res => {
          this.orgCode = res.data[0].id;
          this.$refs.tree.setTreeData(res.data);
        },
        error => {
          this.$message.error(error);
        }
      );
    },
    importFile() {
      this.showImport = true;
    },
    //设置全部展开和折叠。state参数为bool值
    setAllExpand(state) {
      var nodes = this.$refs.tree.store.nodesMap;
      for (var i in nodes) {
        nodes[i].expanded = state;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.sparePart {
  min-height: 500px;
  height: 100%;
  .constentmain {
    margin-left: 15px;
    height: 100%;
    min-height: 500px;
  }
  .treeDiv {
    height: calc(100% - 20px) !important;
  }
  /deep/.el-tabs__content {
    height: calc(100% - 40px);
  }
  /deep/.el-tab-pane {
    height: 100%;
  }
  .sparePartTitle {
    position: relative;
    top: 7px;
    left: 10px;
    text-align: left;
    color: #909399;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
.flowWrap {
  display: flex;
  flex-flow: wrap nowrap;
}
.el-tabs--border-card {
  box-shadow: none;
}
</style>